<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LawnTown MAN</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .out{
            width: 940px;
            height: 55px;
            margin: 0 auto;
            font-size: 20px;
            background-color:#AEBDCC;
            line-height: 55px;
            list-style: none;
        }
        a{
            display: block;
            cursor: pointer;
        }

        .plat{
            display: none;
            list-style:none;
            background-color: #444;
            width: 200px;
            height: inherit;
            position: absolute;
            top: 56px;

        }
        .plat li{
            list-style: none;
        }
        .plat li a{
            width: 200px;
            margin: 0 auto;
            text-align: center;
            color: lightgrey;
        }
        .nav{
            float: left;
        }
        .nav a{
            float: left;
            position: relative;
            display: block;
            margin-left: 40px;
            text-decoration: none;
            color: black;
        }
        .nav a:hover{
            color: #fafafa;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }
        .three{
            position: absolute;
            left: 201px;
            background-color: #444;
            display: none;
        }

        #frame-box{
            width: 100%;
            height: 40rem;
        }
        #frame-box iframe{
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="out">       
    <ul class="nav">
        <a href="https://y.music.163.com/m/song?app_version=8.2.41&id=1400212946&textid=7025&uct=9BxkLIIEkHVP3XeE+mHX8Q%3D%3D">关于LawnTown MAN</a>
        <ul class="plat">
            <li><a onclick=change_ifame("Faculty.html")>作品</a></li>
            <li><a onclick=change_ifame("Students.html")>微博粉丝团</a></li>
            <li><a onclick=change_ifame("lab/MIIL_Research_Assistant_Flyer.pdf")>其他社交账号</a></li>
            <li><a href="#">关于我们的组织</a></li>
        </ul>
    </ul>
    <ul class="nav">
        <a href="#">组织</a>
        <ul class="plat">
            <li class="third"><a href="#" class="third">关于ALIB</a></li>
            <ul class="three">
                <li><a href="#">A is for Andy</a></li>
                <li><a href="#">L is for Lasky</a></li>
                <li><a href="#">I is for Idoit</a></li>
                <li><a href="#">B is for Brition</a></li>
            </ul>
            <li class="other"><a href="#">Andy是憨憨</a></li>
            <li class="other"><a href="#">没错Andy是憨憨</a></li>
        </ul>
    </ul>

    <ul class="nav">
        <a href="#">网易云单曲</a>
        <ul class="plat">
            <li class="third" id="third1"><a href="#" class="third">Download</a></li>
            <ul class="three" id="other1">
				<li><a onclick=change_ifame("DownloadFileManagement.html")>MP3
                </a></li>
                <li><a href="#">专辑MP4</a></li>
            </ul>
            <li class="third" id="third2"><a href="#" class="third">QQ音乐</a></li>
            <ul class="three" id="other2">
				<li><a onclick=change_ifame("AboutiQ-MPS.html")>qq音乐专属专辑</a></li>
				<li><a onclick=change_ifame("AboutiQ-FluoroAngio.html")>绿钻开通</a></li>
            </ul>
            <li class="other"><a href="#">酷狗</a></li>
			<li class="other"><a onclick=change_ifame("AboutiRadiomicsApp.html")>酷狗音乐主页</a></li>
            <li class="other"><a onclick=change_ifame("google.com")>Google</a></li>

        </ul>
    </ul>

    <ul class="nav">
        <a href="#">加入我们</a>
        <ul class="plat">
            <li class="third"><a href="#" class="third">粉丝团</a></li>
            <ul class="three">
                <li><a href="#">资ALIB</a></li>
                <li><a href="#">为LawnTown MAN献上应援</a></li>
            </ul>
            <li class="other"><a href="#">G2的艺术照片</a></li>
            <li class="other"><a href="#">粉丝专属APP</a></li>
        </ul>
    </ul>

    <ul class="nav">
        <a href="#">其他项目</a>
    </ul>
</div>

<div id="frame-box">
    <iframe id="my-frame" src=""></iframe>
</div>


</body>
</html>
<script type="text/javascript">

    var third = document.getElementsByClassName("third");
    var three = document.getElementsByClassName("three");
    var nav = document.getElementsByClassName("nav");
    var other = document.getElementsByClassName("other");
    var third1 = document.getElementById("third1");
    var third2 = document.getElementById("third2");
    var other1 = document.getElementById("other1");
    var other2 = document.getElementById("other2");


    third1.onmousemove = function () {
        other2.style.display = "none";
    }
    third2.onmousemove = function () {
        other1.style.display = "none";
    }
    for (var i in third) {
        third[i].onmouseover = triple_show;
    }
    for (var i in other) {
        other[i].onmousemove = triple_hide;
    }

    function triple_show() {
        // this.nextElementSibling.style.display = "block";
        var nextElement = this;
        while(nextElement = nextElement.nextSibling){
            if(nextElement.nodeType == 1){
                nextElement.style.display="block";
                break;
            }
        }
    }

    function triple_hide() {
        // this.parentNode.children[1].style.display="none";
        // this.nextElementSibling.style.display="none";
        this.parentNode.querySelector(".three").style.display = "none";
        // this.parentNode.querySelector("#other1").style.display = "none";
        // this.parentNode.querySelector("#other2").style.display = "none";
        other1.style.display="none";
        other2.style.display="none";
    }

    for (var i in nav) {
        nav[i].onmouseover = plat_show;
        nav[i].onmouseout = plat_hide;
    }

    function plat_show() {
        this.querySelector(".plat").style.display="block";
    }

    function plat_hide() {
        this.querySelector(".plat").style.display="none";
    }


    function change_ifame(url) {
        var my_frame = document.getElementById("my-frame");
        my_frame.setAttribute("src", url);
    }

</script>